<template>
  <!--选择字段的dialog-->
  <el-dialog
      :append-to-body="true"
      :close-on-click-modal="false"
      :show-close="true"
      :close-on-press-escape="false"
      :title="toConfigureFieldDialog.title"
      :visible.sync="toConfigureFieldDialog.isDialog"
      custom-class="toConfigure-field-dialog"
      @close="HandleUtils.handleParent($parent,'tabsOrTableCancel')"
      width="1060px"
  >
    <div
        class="toConfigure-field-dialog-content"
        v-loading="toConfigureFieldDialog.tabsOrTableLoading"
    >

      <div class="left">
        <el-input placeholder="搜索字段" v-model="toConfigureFieldDialog.fieldSearch" class="input-with-select">
          <el-button slot="append" icon="el-icon-search"
                     @click="HandleUtils.handleParent($parent,'tabsOrTableSearch')"></el-button>
        </el-input>
        <div class="parent">
          <div class="child">
            <el-scrollbar wrap-class="scrollbar-x" style="height: 100%">
              <template v-for="(item,key) in toConfigureFieldDialog.fieldProp">
                <dl v-if="Utils.arrayContain(item.routerRole,$store.state.routerRole)" :key="key" class="content">
                  <dt>{{ item.name }}</dt>
                  <dd>
                    <template v-for="(item2, key2) in item.option">
                      <el-checkbox
                          v-model="item2[`${toConfigureFieldDialog.tabsOrTable}Checked`]"
                          @change="tabsOrTableChecked(item2,key2)" :key="key2"
                          :disabled="item2[`${toConfigureFieldDialog.tabsOrTable}CheckedDisabled`]"
                          v-if="item2.show && Utils.arrayContain(item2.routerRole,$store.state.routerRole)"
                      >
                        <el-tooltip class="item" :disabled="item2.label.length<8" effect="dark" :content="item2.label"
                                    placement="top-start" :key="key">
                          <div class="tooltip">{{ item2.label }}</div>
                        </el-tooltip>
                      </el-checkbox>

                    </template>
                  </dd>
                </dl>
              </template>
            </el-scrollbar>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="title">
          已选择（{{ num }}）
        </div>
        <div class="frozen" v-if="toConfigureFieldDialog.tabsOrTable==='table'">
          <span>冻结前</span>
          <el-input
              placeholder="'冻结前几条"
              v-model="toConfigureFieldDialog.frozenFrontNum"
              onkeyup="this.value = this.value.replace(/\D/g,'');"
          />
          <span>冻结后</span>
          <el-input
              placeholder="'冻结后几条"
              v-model="toConfigureFieldDialog.frozenAfterNum"
              onkeyup="this.value = this.value.replace(/\D/g,'');"
          />
        </div>
        <div :class="['parent',toConfigureFieldDialog.tabsOrTable==='table'?'tableParent':'']">
          <div class="child">
            <el-scrollbar wrap-class="scrollbar-x" style="height: 100%">
              <ul class="content">
                <draggable v-model="toConfigureFieldDialog[`${toConfigureFieldDialog.tabsOrTable}FieldProp`]">
                  <template
                      v-for="(item,key) in toConfigureFieldDialog[`${toConfigureFieldDialog.tabsOrTable}FieldProp`]">
                    <li :key="key" v-if="Utils.arrayContain(item.routerRole,$store.state.routerRole)">
                      <i class="el-icon-thumb"/>
                      <span>{{ item.label }}</span>
                      <i class="el-icon-close" @click="tabsOrTableClose(item,key)"></i>
                    </li>
                  </template>

                </draggable>

              </ul>
            </el-scrollbar>
          </div>
        </div>
      </div>

    </div>
    <div slot="footer" class="toConfigure-field-dialog-footer">
      <el-button
          type="danger"
          @click="HandleUtils.handleParent($parent,'tabsOrTableDialogInit')"
          icon="el-icon-delete el-icon--left"
      >还原初始化
      </el-button>
      <el-button
          @click="HandleUtils.handleParent($parent,'tabsOrTableCancel')"
          icon="el-icon-close el-icon--left"
      >取 消
      </el-button>
      <el-button
          type="primary"
          @click="HandleUtils.handleParent($parent,'tabsOrTableDetermine')"
          icon="el-icon-check el-icon--left"
      >
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {draggable},
  props: ['toConfigureFieldDialog'],
  data() {
    return {
      num:0,//选择的数量
    };
  },
  mounted() {
    this.choiceNum();
  },
  methods: {
    //选择数量
    choiceNum(){
      this.num=0;
      for (let i = 0; i <  this.toConfigureFieldDialog[`${this.toConfigureFieldDialog.tabsOrTable}FieldProp`].length; i++) {
        if(this.Utils.arrayContain(this.toConfigureFieldDialog[`${this.toConfigureFieldDialog.tabsOrTable}FieldProp`][i].routerRole,this.$store.state.routerRole)){
          this.num++
        }
      }
    },
    //dialog 选择了字段
    tabsOrTableChecked(res) {
      let tabsOrTable = this.toConfigureFieldDialog.tabsOrTable; //配置 tabs 还是 table
      if (res[`${tabsOrTable}Checked`]) {
        this.toConfigureFieldDialog[`${tabsOrTable}FieldProp`].push(res);
        this.choiceNum();
      } else {
        let FieldProp = this.toConfigureFieldDialog[`${tabsOrTable}FieldProp`];
        for (let i = 0; i < FieldProp.length; i++) {
          if (res.field === FieldProp[i].field) {
            FieldProp.splice(i, 1);
            this.choiceNum();
            return false;
          }
        }
      }

    },
    //拖拽 删除
    tabsOrTableClose(res, key) {
      let tabsOrTable = this.toConfigureFieldDialog.tabsOrTable; //配置 tabs 还是 table
      let FieldProp = this.toConfigureFieldDialog[`${tabsOrTable}FieldProp`];
      let fieldProp = this.toConfigureFieldDialog.fieldProp;//所有字段
      for (let i = 0; i < fieldProp.length; i++) {
        for (let j = 0; j < fieldProp[i].option.length; j++) {
          if (res.field === fieldProp[i].option[j].field) {
            fieldProp[i].option[j][`${tabsOrTable}Checked`] = false;
            FieldProp.splice(key, 1);
            this.choiceNum();
            return false
          }
        }
      }

    },
  },
};
</script>

<style lang="scss" scoped>

</style>
